<template>
    <div class="ortherfunction">
        <h2>Orther Function</h2>
        <ul class="list">
            <li @click="doMyOrder">
                <div class="orther-box">
                    <img src="@/assets/钱包.png" alt="">
                </div>
                <div class="orther-desc">Order list</div>
                <img src="@/assets/order-jiantou.png" alt="">
            </li>
            <li @click="doKefu">
                <div class="orther-box">
                    <img src="@/assets/客服.png" alt="">
                </div>
                <div class="orther-desc">Contact Us</div>
                <img src="@/assets/order-jiantou.png" alt="">
            </li>
            <li @click="doPriacy">
                <div class="orther-box">
                    <img src="@/assets/隐私.png" alt="">
                </div>
                <div class="orther-desc">Priacy</div>
                <img src="@/assets/order-jiantou.png" alt="">
            </li>
            <li @click="doTerms">
                <div class="orther-box">
                    <img src="@/assets/法律条款.png" alt="">
                </div>
                <div class="orther-desc">Terms</div>
                <img src="@/assets/order-jiantou.png" alt="">
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        // 点击订单列表
        doMyOrder() {
            this.$router.push(`/myorder`)
            this.$store.commit('changeCount', 1)
        },
        // 点击隐私页
        doPriacy() {
            this.$router.push('/privacypoicy')
        },
        //联系我们
        doKefu() {
            // this.$router.push('/kefu')
            window.location.href = 'mailto:' + 'servicebuddycus@aol.com'
        },
        //点击法律条款
        doTerms() {
            this.$router.push('/Terms')
        }
    }
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.ortherfunction {
    height: (230/@a);
    padding-left: (13/@a);

    h2 {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (20/@a);
        color: #000000;
    }

    .list {
        height: (175/@a);

        li {
            width: (160/@a);
            height: (75/@a);
            border-radius: (10/@a);
            float: left;
            margin-left: (10/@a);
            margin-bottom: (10/@a);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: (2/@a) #e8e8e8 solid;

            .orther-box {
                width: (33/@a);
                height: (33/@a);
                background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
                border-radius: 50%;
                text-align: center;
                margin-left: (15/@a);

                img {
                    margin-top: (8/@a);
                    margin-left: (8/@a);
                    width: (16/@a);
                }
            }

            .orther-desc {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (14/@a);
                color: #202020;
            }

            img {
                width: (10/@a);
                margin-right: (10/@a);
            }
        }
    }
}
</style>